<template>
  <div class="list">
    <!-- :label-col="{span: 5}"-->
    <a-form
        ref="searchFormRef"
        class="search-form base-mb15"
        :model="searchFormState"
        @finish="onSearchFinish"
    >
      <a-row :gutter="[10, 24]">
        <a-col :span="6">
          <a-form-item name="mobile" :label="$t('self.order.tips2')">
            <a-input v-model:value="searchFormState.mobile"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item name="orgId" :label="$t('self.order.tips12')" :label-col="{ style: { width: '100px' } }">
            <a-select v-model:value="searchFormState.orgId" :options="searchOrgOptions" :fieldNames="{label: 'orgName',value: 'id'}" :placeholder="$t('self.pleaseChoose')"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item name="orderNo" :label="$t('self.order.tips13')" :label-col="{ style: { width: '100px' } }">
            <a-input v-model:value="searchFormState.orderNo"></a-input>
          </a-form-item>
        </a-col>
<!--        <a-col :span="6">-->
<!--          <a-form-item name="stationId" :label="$t('self.order.tips5')">-->
<!--            <a-input v-model:value="searchFormState.stationId"></a-input>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--      <a-row :gutter="[10, 24]" class="base-mt20">-->
        <a-col :span="6">
          <a-form-item name="startTime" :label="$t('self.order.tips14')">
            <a-date-picker v-model:value="searchFormState.startTime" style="width: 100%;"/>
          </a-form-item>
        </a-col>

        <a-col :span="6">
          <a-form-item name="endTime" :label="$t('self.order.tips15')" :label-col="{ style: { width: '100px' } }">
            <a-date-picker v-model:value="searchFormState.endTime" style="width: 100%;"/>
          </a-form-item>
        </a-col>

        <a-col :span="6">
          <a-form-item name="orderType" :label="$t('self.order.tips17')" :label-col="{ style: { width: '100px' } }">
            <a-select v-model:value="searchFormState.orderType" :options="searchOrderTypeOptions" :placeholder="$t('self.pleaseChoose')"/>
          </a-form-item>
        </a-col>

        <a-col :span="6">
          <a-form-item name="status" :label="$t('self.order.tips16')" :label-col="{ style: { width: '100px' } }">
            <a-select v-model:value="searchFormState.status" :options="searchStatusOptions" :placeholder="$t('self.pleaseChoose')"/>
          </a-form-item>
        </a-col>

        <a-col :span="6" class="base-flex base-rows">
          <a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
          <a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
        </a-col>
      </a-row>

    </a-form>

    <s-table ref="stableRef" :api-obj="tableConfig.apiObj" api-method="POST" :columns="sourceColumn" row-key="id" :light-index="tableConfig.lightIndex" :is-row-selection="true" @selectionChange="tableSelectionChange" :is-show-tool="false" :scroll="{ x: 1400 }">
      <template #top>
        <a-button>{{ $t('self.delete') }}</a-button>
        <!--        <a-button type="default" class="base-ml10" @click="excelUpload">excel导入</a-button>-->
      </template>
      <template #bodyCell="{ column, record, index }">

        <!--帐户状态-->
        <template v-if="column.key === 'status'">
          <template v-if="record[column.key]">
            <sc-status-indicator type="primary"></sc-status-indicator>
            {{ $t('self.user.tips6') }}
          </template>
          <template v-else>
            <sc-status-indicator type="warning"></sc-status-indicator>
            {{ $t('self.user.tips7') }}
          </template>
        </template>

        <template v-if="column.key === 'action'">
            <span>
              <a href="javascript:void(0)" @click="openDetailModal(record, index)">{{ $t('self.detailView') }}</a>
            </span>
        </template>

      </template>
    </s-table>

    <detailModal ref="detailModalRef" @ok="" @close=""></detailModal>

  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import detailModal from './detail_modal.vue'
import { useRoute, useRouter } from 'vue-router'
import ScStatusIndicator from '@/components/scMini/scStatusIndicator.vue'
import { mainStore } from '@/stores/mainStore'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const $T = proxy.$t
const route = useRoute()
const router = useRouter()
const useMainStore = mainStore()

const selectedKey = ref([])
const stableRef = ref(null)
const tableConfig = ref({
  apiObj: $API.backend.order.list,
  lightIndex: [] // 要高亮的行号
})
// 表格列
const sourceColumn = ref([])

onMounted(async () => {
  // 获取表格列
  resetDefaultOptionsByLang()
  // 获取运营商下拉数据
  searchOrgOptions.value = await proxy.getOrgSelectList(true)
})

// 监听 lang 状态
watch(
    () => useMainStore.lang, // 切换语言包时
    (curr, old) => {
      // console.log('语言包', curr)
      // 获取表格列
      resetDefaultOptionsByLang()
    }
)

const resetDefaultOptionsByLang = () => {
  sourceColumn.value = [
    {
      title: $T('self.order.tips1'),
      dataIndex: 'orderNo',
      key: 'orderNo'
      // width: 110
    },
    {
      title: $T('self.order.tips2'),
      dataIndex: 'mobile',
      key: 'mobile'
    },
    {
      title: $T('self.order.tips4'),
      dataIndex: 'createTime',
      key: 'createTime'
    },
    {
      title: $T('self.order.tips5'),
      dataIndex: 'pileNo',
      key: 'pileNo'
    },
    {
      title: $T('self.order.tips6'),
      dataIndex: 'stationName',
      key: 'stationName'
    },
    {
      title: $T('self.order.tips7'),
      dataIndex: 'currentV',
      key: 'currentV'
    },
    {
      title: $T('self.order.tips8'),
      dataIndex: 'currentA',
      key: 'currentA'
    },
    {
      title: $T('self.order.tips222'),
      dataIndex: 'totalChargeQuantity',
      key: 'totalChargeQuantity'
    },
    {
      title: $T('self.order.tips10'),
      dataIndex: 'totalChargeTimes',
      key: 'totalChargeTimes',
      // 自定义显示列内容
      customRender: ({text, record}) => {
        // 接口返回是秒，处理为分
        return proxy.getMinBySeconds(text)
      },
    },
    {
      title: $T('self.order.tips11'),
      dataIndex: 'totalChargeMoney',
      key: 'totalChargeMoney'
    },
    { title: $T('self.actionButton'), key: 'action', ellipsis: true, fixed: 'right', width: 100 }
  ]
  searchOrderTypeOptions.value = [
    {
      label: $T('self.order.orderType.all'),
      value: ''
    },
    {
      label: $T('self.order.orderType.tips1'),
      value: 1
    },
    {
      label: $T('self.order.orderType.tips2'),
      value: 2
    },
    {
      label: $T('self.order.orderType.tips3'),
      value: 3
    },
    {
      label: $T('self.order.orderType.tips4'),
      value: 4
    },
    {
      label: $T('self.order.orderType.tips5'),
      value: 5
    }
  ]
  searchStatusOptions.value = [
    {
      label: $T('self.order.statusType.all'),
      value: ''
    },
    {
      label: $T('self.order.statusType.tips1'),
      value: 1
    },
    {
      label: $T('self.order.statusType.tips2'),
      value: 2
    },
    {
      label: $T('self.order.statusType.tips3'),
      value: 3
    },
    {
      label: $T('self.order.statusType.tips4'),
      value: 4
    },
    {
      label: $T('self.order.statusType.tips5'),
      value: 5
    }
  ]
}

const tableSelectionChange = (rows, record) => {
  selectedKey.value = rows
  // console.log('表格选择项', rows, record)
}

// =========start search表单
const searchFormRef = ref(null)
const searchFormState = ref({
  mobile: '',     // 手机号码
  orderNo: '',    // 订单号
  orgId: null,    // 运营商及场站
  stationId: '',   // 充电桩号
  startTime: '',  // 开始时间
  endTime: '',    // 开始时间
  status: null,   // 状态
})
const searchOrgOptions = ref([])
const searchOrderTypeOptions = ref([])
const searchStatusOptions = ref([])
const onSearchFinish = (values) => {
  stableRef.value.upData(values, 1)
}
// 重置搜索表单
const resetSearchForm = () => {
  searchFormRef.value.resetFields()
}
// =========end search表单

const detailModalRef = ref(null)
const openDetailModal = (record, index) => {
  tableConfig.value.lightIndex = [index] // 仅高亮当前行
  nextTick(() => {
    detailModalRef.value.show(record)
  })
}


</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  background: #ffffff;
  padding: 15px;

  .search-form {
    padding: 16px;
    background: rgb(247, 248, 250);

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }
}
</style>
